<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="人工解读"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="box-part mb-40 p-4 overflow-hidden" v-for="e,i in typeList" :key="i" @click="setbBsplateId(e)">
						<view class="bg-white layout">
							<view class="title">
								<text>{{e.title}}</text>
							</view>
							<view class="flex justify-center items-center name" :class="[`name${i+1}`, e.id==bbsplateId?'active':'']">
								<text>{{e.name}}</text>
							</view>
							<view class="tips">
								<view class="icon text-white">
									<text>如：</text>
								</view>
								<text>{{e.tips}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="p-20">
			<view class="btn-next flex justify-center" @click="handleNext">
				<text>下一步</text>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center">
			<view class="box-popup w-[690rpx] pb-60">
				<view class="box-item mb-40">
					<view class="box-title flex justify-center items-center" :class="{active: chooseCount == 1}"
						@click="handleChoose(1)">
						<text>单人星图模式解读</text>
					</view>
					<view class="box-desc">推荐解读单人问题选择此模式</view>
				</view>
				<view class="box-item mb-40">
					<view class="box-title flex justify-center items-center" :class="{active: chooseCount == 2}"
						@click="handleChoose(2)">
						<text>双人星图模式解读</text>
					</view>
					<view class="box-desc">推荐解读双人问题比如涉及到我们 或者是 他对我 我对他 她对我 我对她时请选择此模式</view>
				</view>
				<view class="btn-submit flex justify-center items-center" @click="handleStep">下一步</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 1, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: 0, // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
	})
	const selcard = ref("") // 星图档案ID字符串
	const starsts = ref("") // 单人星图/双人星图
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const addparme = ref([]) // 不适感
	systemSetting.value = uni.getStorageSync('dict');

	const popupRef = ref(null) // 星图pop
	const chooseCount = ref(0) // 单盘 1 合盘 2

	onLoad((option) => {
		postFrom.value.describe = option.describe
		getWorkBbsplatelist()
	})
	const handleChoose = (count) => {
		chooseCount.value = count
	}
	const handleStep = () => {
		if (chooseCount.value == 0) {
			uni.showToast({
				icon: "none",
				title: "请选择单人或双人盘！"
			})
			return
		}
		uni.navigateTo({
			url: `/pages/views/archiveList?needCount=${chooseCount.value}&tab=1&from=quick`,
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				res.eventChannel.emit('acceptDataFromOpenerPage', {
					bbsplateId: bbsplateId.value,
					posts: posts.value,
					describe: postFrom.value.describe,
				})
			}
		})
	}
	const handleNext = () => {
		if (bbsplateId.value == '') {
			uni.showToast({
				icon: "none",
				title: "请选择问题类型！"
			})
			return
		}
		if (posts.value == 1) {
			uni.navigateTo({
				url: `/pages/test/testQuickPsychology?bbsplateId=${bbsplateId.value}&posts=${posts.value}&describe=${postFrom.value.describe}`
			})
		} else if (posts.value == 2) {
			popupRef.value.open()
			// uni.navigateTo({
			// 	url: `/pages/test/testQuickPsychology?bbsplateId=${bbsplateId.value}&posts=${posts.value}&describe=${postFrom.value.describe}`
			// })
		} else if (posts.value == 3) {
			uni.navigateTo({
				url: `/pages/test/testQuickCard?bbsplateId=${bbsplateId.value}&posts=${posts.value}&describe=${postFrom.value.describe}`
			})
		}
	}
	const setbBsplateId = (val) => {
		bbsplateId.value = val.id
		bbsplate.value = val
		if (val.btp == 1) {
			// 心理专区
			posts.value = 1
		}
		if (val.btp == 2) {
			// 星图区
			posts.value = 2
		}
		if (val.btp == 3) {
			// 卡牌区
			posts.value = 3
		}
	}
	const getWorkBbsplatelist = () => {
		communityApi.getWorkBbsplatelist().then(res => {
			res.data.map(item => {
				if (item.id == '1321851903813877760') { // 心理
					item.name = '选用心理模式解读'
					item.title = '推荐想了解自我或双人关系未来发展的用户选择此方式。'
					item.tips = '我失恋到现在已经有半年多了，经常吃不下睡不好，还觉得自己很没用，做什么都没心情，我是不是抑郁了？'
				} else if (item.id == '1321851961871433728') { // 星图
					item.name = '选用星图模式解读'
					item.title = '推荐想了解自我或双人关系未来发展的用户选择此方式。'
					item.tips = '我想从星图的角度出发看看我的优点有哪些？或我想知道我男朋友对我的看法以及我们未来的发展和注意事项。'
				} else if (item.id == '1321849359872032768') { // 卡牌
					item.name = '选用卡牌模式解读'
					item.title = '推荐对于无法归类的问题感兴趣的用户选择此方式。'
					item.tips = '我新入职的这个公司未来的发展及人际关系方面需要注意的事项。或未来三个月内在健康方面需要注意哪些？'
				}
			})
			typeList.value = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.box-part {
		background: linear-gradient(20deg, #FFE7B2 0%, #FFF1D1 100%);
		border-radius: 32rpx;

		.layout {
			border-radius: 32rpx;
			padding: 20rpx 0;
		}

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			padding: 0 26rpx;
		}

		.name {
			position: relative;
			z-index: 10;
		}

		.name1 {
			background: url(/static/test/bg_choose1.png) no-repeat;
			background-size: cover;
			height: 76rpx;
			margin-top: 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #B9C5DC;
			line-height: 56rpx;

			&.active {
				background: url(/static/test/bg_active_choose1.png) no-repeat;
				background-size: cover;
				color: #fff;
			}
		}

		.name2 {
			background: url(/static/test/bg_choose2.png) no-repeat;
			background-size: cover;
			height: 76rpx;
			margin-top: 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #E6BCCE;
			line-height: 56rpx;

			&.active {
				background: url(/static/test/bg_active_choose2.png) no-repeat;
				background-size: cover;
				color: #fff;
			}
		}

		.name3 {
			background: url(/static/test/bg_choose3.png) no-repeat;
			background-size: cover;
			height: 76rpx;
			margin-top: 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #A7B6E2;
			line-height: 56rpx;

			&.active {
				background: url(/static/test/bg_active_choose3.png) no-repeat;
				background-size: cover;
				color: #fff;
			}
		}

		.tips {
			position: relative;
			padding: 0 28rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 36rpx;
			text-indent: 2em;

			.icon {
				position: absolute;
				left: 0;
				top: -40rpx;
				z-index: 9;
				background: url(/static/test/bg_tips.png) no-repeat;
				background-size: cover;
				width: 86rpx;
				height: 79rpx;

				text {
					position: absolute;
					bottom: 6rpx;
					left: -30rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}
		}
	}

	.btn-next {
		background: url(/static/test/bg_btn_blue.png) no-repeat;
		background-size: cover;
		height: 104rpx;

		text {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 24rpx;
		}
	}

	.box-popup {
		background: linear-gradient(180deg, #DDF4FF 0%, #F7F7F7 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 56rpx;
		margin: 0 30rpx;

		.box-item {
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			overflow: hidden;

			.box-title {
				background: url(/static/test/pop_bg_title.png) no-repeat;
				background-size: cover;
				height: 64rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #BCBBE2;
				line-height: 64rpx;

				&.active {
					background: url(/static/test/pop_bg_title_active.png) no-repeat;
					background-size: cover;
					color: #fff;
				}
			}

			.box-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 56rpx;
				padding: 32rpx 28rpx;
				text-align: center;
			}
		}

		.btn-submit {
			background: url(/static/test/pop_bg_btn.png) no-repeat;
			background-size: cover;
			height: 80rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>